<template>
	<view>
		<view class="loanPageheader">
		</view>
		<view class="loanPageProduct">
			<view class="jieMuch" style="width: 280rpx;">
				<view>借多少<text style="color: #888888;">1000-50000元</text></view>
				<!-- <view class="jieNum">7000</view> -->
				<input class="jieNum" type="number" placeholder="金额" value="" v-model="money" @input="changeInput()"/>
			</view>
			<view class="jieMuch" style="float: right;margin-right: 5rpx;position: relative;" @click="jieMuchClick()">
				<view class="">借多久<text style="color: #888888;">6-12月</text></view>
				<view class="jieNum" style="width: 130rpx;">{{month}}</view>
				<image src="../../static/bottom.png" mode="" style="margin-left: 0;"></image>
				<!-- <view style="width: 100%;height: 400rpx;position: absolute;top: 110rpx;background: #FFFFFF;overflow-x: auto;text-align: center;border: 1px solid #CCCCCC;">
					<view style="width: 100%;height: 50rpx;line-height: 50rpx;border-top: 1px solid #CCCCCC;" v-for="(item,index) in month">
						{{item}}月
					</view>
				</view> -->
				<lb-picker @confirm="HandleConfirmEducation" ref="Education" :list="Education"></lb-picker>
			</view>
			<view class="ProductDtaile"></view>
			<view class="daozhangBox">
				<view class="daozhangCash" style="border-right: 1rpx solid #888888;">
					<view>预估到账</view>
					<view class="daozhangCashNum" v-html="money == ''?'0':money">{{money}}<text style="font-size: 30rpx;">元</text></view>
				</view>
				<view class="daozhangCash">
					<view>预估每期还款</view>
					<view class="daozhangCashNum">{{average}}<text style="font-size: 30rpx;">元</text></view>
				</view>
				<view class="feilv">费率36%/年，最快放贷5分钟</view>
			</view>
			<view class="searchProductDetaile" @click="LoanPageClick(4)">查看产品详情</view>
		</view>
		<view style="padding: 72rpx 50rpx 61rpx 50rpx;">
			<view class="bitiandata">必填资料</view>
			<view class="bitiandata-infor">完成填写的用户，92.9%的人贷款成功</view>
			<view class="bitiandata-fuyong" style="float: right;position:relative; top:6rpx;" @click="LoanPageClick(6)">
				可复用的产品
				<image src="../../static/Right.png" mode=""></image>
			</view>
			<view class="jibenInforBox" @click="LoanPageClick(1)">
				<view class="jibenInfor">基本信息</view>
				<!-- <view class="comerenzhen" v-if="authentica1 == '已认证'">{{authentica1}}</view> -->
				<view :class="authentica1 == '去认证' ? 'comerenzhen':'comerenzhen2'">{{authentica1}}</view>
			</view>
			<view class="jibenInforBox" @click="LoanPageClick(2)">
				<view class="jibenInfor">实名认证</view>
				<view :class="authentica2 == '去认证' ? 'comerenzhen':'comerenzhen2'">{{authentica2}}</view>
			</view>
		</view>
		<view class="agreeXieyi">
			<checkbox-group @change="checkboxChange">
				<checkbox value="cb" checked="true" Color="#000000"/>
				<view class="agreeXieyiTxt">同意<text>《机构授权协议》</text></view>
			</checkbox-group>
		</view>
		<view class="nextOneBox">
			<image src="../../static/shoucang.png" @click="LoanPageClick(3)" mode=""></image>
			<view class="nextOne" @click="XYBClick()">下一步</view>
		</view>
		<view class="loanPageBottom" v-if="lPDetails">
			<view class="loanPageBottomDetails">
				<view style="font-size: 40rpx;font-family: PingFang SC;font-weight: bold;color: #000000;">
					产品详情<span style="float: right;" @click="LoanPageClick(5)">X</span>
				</view>
				<view style="margin-top: 80rpx;margin-bottom: 20rpx;">贷款流程</view>
				<view>
					<view style="display: inline-block;margin-right: 75rpx;text-align: center;">
						<image src="../../static/zl.png" style="width: 86rpx;height: 86rpx;" mode=""></image>
						<view style="color: #868686;font-size: 24rpx;">填写资料</view>
					</view>
					<view style="display: inline-block;margin-right: 75rpx;text-align: center;">
						<image src="../../static/sh.png" style="width: 86rpx;height: 86rpx;" mode=""></image>
						<view style="color: #868686;font-size: 24rpx;">审核</view>
					</view>
					<view style="display: inline-block;margin-right: 75rpx;text-align: center;">
						<image src="../../static/jk.png" style="width: 86rpx;height: 86rpx;" mode=""></image>
						<view style="color: #868686;font-size: 24rpx;">确认借款</view>
					</view>
					<view style="display: inline-block;margin-right: 75rpx;text-align: center;">
						<image src="../../static/fd.png" style="width: 86rpx;height: 86rpx;" mode=""></image>
						<view style="color: #868686;font-size: 24rpx;">放贷</view>
					</view>
				</view>
				<view style="margin-top: 80rpx;margin-bottom: 20rpx;">基本信息</view>
				<view style="font-size: 24rpx;color: #868686;">
					<view style="margin-bottom: 19rpx;">1.借款额度:1000-50000元</view>
					<view style="margin-bottom: 19rpx;">2.参考年费率:36%/年</view>
					<view style="margin-bottom: 19rpx;">3.放贷时间:最快5分钟</view>
				</view>
				<view style="margin-top: 80rpx;margin-bottom: 20rpx;">还贷说明</view>
				<view style="font-size: 24rpx;color: #868686;">
					{{info.info[0]}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import {VUE_API_URL} from "@/components/pulugins/index"
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				id:'',		//产品ID
				info:'',	//产品详情
				Agreement:true,//协议
				Education:[6,7,8,9,10,11,12],//选择学历
				month:6,
				money:'',		//金额
				average:0,		//每期应还
				lPDetails:false,
				authentication:'',
				authentica1:'去认证',
				authentica2:'去认证'
			}
		},
		onLoad(options) {
		    // console.log(options.id);
			var that = this;
			this.id = options.id;
		},
		onShow() {
			this.LoanPage();
			this.BrowseCreate();
			this.UserInfo();
		},
		methods: {
			UserInfo(){
				var that = this;
				that.token = uni.getStorageSync('token');
				uni.request({
				    url: VUE_API_URL + '/user/info', 
					method:'POST',
				    data: {
				        
				    },
				    header: {
				        'Authori-zation': 'Bearer ' + that.token //自定义请求头信息
				    },
				    success: (res) => {
						console.log(res);
						var authentica = res.data.data.authentication;
						var arr = authentica.split(',');
						for(var i=0;i<arr.length;i++){
							if(arr[i]==1){
								that.authentica1='已认证'
							}else if(arr[i]==2){
								that.authentica2='已认证'
							}
						}
				    }
				});	 
			},
			XYBClick(){
				var that = this;
				if(that.money == 0 || that.money == ''){
					uni.showToast({
					    title: '请输入金额',
						icon:'none',
					    duration: 2000
					});
				}else if(that.money%1000!=0){
					uni.showToast({
					    title: '金额请输入1000的整数倍',
						icon:'none',
					    duration: 2000
					});
				}
				else if(that.authentica1 != '已认证' || that.authentica2 != '已认证'){
					uni.showToast({
					    title: '请完成必填资料',
						icon:'none',
					    duration: 2000
					});
				}else if(that.Agreement = false){
					uni.showToast({
					    title: '请勾选机构授权协议',
						icon:'none',
					    duration: 2000
					});
				}else{
					window.location.href=that.info.url;
				}
			},
			BrowseCreate(){
				var that = this;
				uni.request({
				    url: VUE_API_URL + 'browse/create', 
					method:'POST',
				    data: {id:that.id}, 
				    header: {
				        'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
						var data = res.data.data
						console.log(data)
				    }
				});
			},
			jieMuchClick(){
				this.$refs.Education.show() // 显示
			},
			checkboxChange: function (e) {
				var that = this;
				if(e.detail.value == ''){
					that.Agreement = false;
				}else{
					that.Agreement = true;
				}
			},
			LoanPage(){
				var that = this;
				uni.request({
				    url: VUE_API_URL + 'product/info', 
					method:'POST',
				    data: {id:that.id}, 
				    header: {
				        'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
						var data = res.data.data
						console.log(data)
						that.info = data.info;
						// that.list = data.list;
				    }
				});
			},
			LoanPageClick(index){
				var that = this;
				if(index == 1){
					uni.navigateTo({		//基本信息
						url: '../second/EssentialInformation'
					});
				}else if(index == 2){
					uni.navigateTo({		//实名认证
						url: '../second/RealNameAuthentication'
					});
				}else if(index == 3){
					uni.request({
					    url: VUE_API_URL + 'collection/create', 
						method:'POST',
					    data: {id:that.id}, 
					    header: {
					        'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
					    },
					    success: (res) => {
							var data = res.data.data
							console.log(data);
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 2000
							});
					    }
					});
				}else if(index == 4){
					that.lPDetails = true;
				}else if(index == 5){
					that.lPDetails = false;
				}else if(index == 6){
					uni.navigateTo({		//实名认证
						url: '../second/loanAll'
					});
				}
			},
			HandleConfirmEducation(e){		
				var that = this;
				that.month = e.value;
				this.changeInput();
				console.log(e)
			},
			changeInput(){					//每期应还
				var that = this;
				that.average = (that.money/that.month).toFixed(2);
			}
		}
	}
</script>

<style>
	.loanPageBottomDetails{
		background: #FFFFFF;
		width: 100%;
		height: 950rpx;
		position: absolute;bottom: 0;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 36rpx 31rpx;
		box-sizing: border-box;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
	}
	.loanPageBottom{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
	}
	.uni-input-placeholder {//webkit内核
	/* 　　color: #D6D0CA; */
	    /* font-size:18px; */
		font-weight: 500;
	}
	/* page{
		background: #F8F8F8;
	} */
	.loanPageheader {
		width: 100%;
		height: 311rpx;
		background: linear-gradient(180deg, #DFAD7B, #DFBA94, #F1E3D5, #FFFFFF);
	}
	.loanPageheader image{
		width: 34rpx;
		height: 28rpx;
		display: inline-block;
		margin-left: 28rpx;
	}
	.jddTitle{
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		padding-top: 81rpx;
		display: inline-block;
		margin-left: 258rpx;
	}
	.loanPageProduct {
		width: 614rpx;
		height: 384rpx;
		background: #FFFFFF;
		box-shadow: 0 3rpx 10rpx 0 rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		margin: -240rpx auto 0 auto;
		font-family: PingFang SC;
		padding: 40rpx;
	}
	.jieMuch {
		font-size: 28rpx;
		font-weight: bold;
		display: inline-block;
	}
	.jieNum {
		font-size: 60rpx;
		line-height: 70rpx;
		display: inline-block;
		vertical-align: middle;
	}
	.jieMuch image {
		width: 33rpx;
		height: 18rpx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 71rpx;
	}
	.ProductDtaile {
		margin-top: 30rpx;
		border-top: 1rpx solid #E4E4E4;
	}
	.daozhangBox {
		width: 596rpx;
		height: 165rpx;
		background: #F2F2F2;
		border-radius: 10rpx;
		margin: 30rpx auto 0 auto;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		padding: 20rpx auto 15rpx auto;
	}
	.daozhangCash {
		display: inline-block;
		width: 266rpx;
		font-size: 28rpx;
		margin: 20rpx 0 0 30rpx;
	}
	.daozhangCashNum{
		font-size: 45rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.feilv{
		font-size: 26rpx;
		line-height: 40rpx;
		margin-left: 32rpx;
	}
	.searchProductDetaile{
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		line-height: 80rpx;
		text-align: center;
	}
	.bitiandata{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 36rpx;
	}
	.bitiandata-infor{
		font-size: 24rpx;
		font-weight: 500;
		color: #888888;
		line-height: 48rpx;
		display: inline-block;
	}
	.bitiandata-fuyong{
		font-size: 24rpx;
		font-weight: 500;
		color: #888888;
		line-height: 48rpx;
		display: inline-block;
		margin-left: 40rpx;
	}
	.bitiandata-fuyong image{
		margin-left: 10rpx;
		width: 13rpx;
		height: 23rpx;
	}
	.jibenInforBox{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 80rpx;
	}
	.jibenInfor{
		display: inline-block;
	}
	.comerenzhen{
		width: 116rpx;
		height: 45rpx;
		background: #F8F8F8;
		border-radius: 23rpx;
		font-size: 30rpx;
		color: #DFAF7F;
		line-height: 45rpx;
		display: inline-block;
		float: right;
		margin-top: 20rpx;
		text-align: center;
	}
	.comerenzhen2{
		width: 116rpx;
		height: 45rpx;
		background: #DFAF7F;
		border-radius: 23rpx;
		font-size: 30rpx;
		color: #F8F8F8;
		line-height: 45rpx;
		display: inline-block;
		float: right;
		margin-top: 20rpx;
		text-align: center;
	}
	.agreeXieyi{
		text-align: center;
		height: 124rpx;
		background: #F8F8F8;
		line-height: 124rpx;
	}
	.agreeXieyi image{
		width: 23rpx;
		height: 23rpx;
		display: inline-block;
	}
	.agreeXieyiTxt{
		font-size: 24rpx;
		color: #888888;
		display: inline-block;
		margin-left: 10rpx;
	}
	.nextOneBox{
		width:100%;
		height: 145rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		position: fixed;
		bottom: 0;
	}
	.nextOneBox image{
		width: 53rpx;
		height: 85rpx;
		margin: 25rpx 38rpx 0 54rpx;
		display: inline-block;
		vertical-align: middle;
	}
	.nextOne{
		width: 550rpx;
		height: 105rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 110rpx;
		display: inline-block;
		background: #DFB78F;
		border-radius: 50rpx;
		text-align: center;
		vertical-align: middle;
		margin-top: 25rpx;
	}
</style>
